<template>
    <div class="container">
        <div class="title">{{photoInfo.title}}</div>
        <div class="photo">
            <img :src="photoInfo.url1" alt="photo" style="width: 100% ;height:100%">
        </div>
        <div class="description">
            <span>{{ photoInfo.description }}</span>
        </div>
    </div>
  </template>

  <script>
 import usePhotoStore from '@/store/modules/photo';

  export default {
    name: "PhotoDetailView",
    data(){
      return {
        photoInfo:{}
      }
    },

    mounted() {
      const photo = usePhotoStore();
      this.photoInfo.url1 = photo.url1;
      this.photoInfo.url2 = photo.url2;
      this.photoInfo.title = photo.title;
      this.photoInfo.description = photo.description;
      console.log('1111');
      console.log(photo);
    }
  }
  </script>

  <style scoped>
  .container{
    max-width: 768px;
    width: 100%;
    min-height: 700px;

    padding: 30px 0;
    margin: 10px auto;

    flex-grow: 1;
  }

  .title{
  color: #333;
  font-size: 28px;
  font-weight: 600;
  line-height: 26px;
  margin-bottom: 5px;
  text-decoration: none;
  text-align: center;
}

.photo{
    text-align: center;
    margin: 20px 0;
}

.description{
  color: #999;
  font-size: 16px;
  line-height: 22px;
  margin: 5px 0;
}

  </style>
